import { defineComponent, reactive } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { CoupleState } from '../uilts';
import { configCurryFilter } from '@/dictionaries/filter';
import dayjs from 'dayjs';
export default defineComponent({
    setup() {
        const route = useRoute();
        const router = useRouter()
        const pageState = reactive({
            dataSource: {} as CoupleState,
            activeKey: [],
            countData: {
                diariesCount: 0,
                photoAlbumCount: 0,
                anniversaryCount: 0,
                checklistCount: 0,
            }
        })
        if (route.params.id) {
            init()
        }
        async function init() {
            const { success, data } = await API.server.couple.getCoupleById.request({ id: Number(route.params.id) })
            if (success) {
                pageState.dataSource = data.data
                pageState.countData = data.countData
            }
        }
        function toUser(id: number) {
            router.push(`/user/list?user_id=${id}`)
        }
        return () => <div  >
            <a-row gutter={[16, 16]} style="background-color: #fff;padding:20px;margin: 0 0 20px">
                <a-col span={6}>
                    <a-statistic title="日记" value={pageState.countData.diariesCount} />
                </a-col>
                <a-col span={6}>
                    <a-statistic title="相册" value={pageState.countData.photoAlbumCount} />
                </a-col>
                <a-col span={6}>
                    <a-statistic title="清单" value={pageState.countData.checklistCount} />
                </a-col>
                <a-col span={6}>
                    <a-statistic title="纪念日" value={pageState.countData.anniversaryCount} />
                </a-col>
            </a-row>
            <a-descriptions style="background-color: #fff;padding:20px;margin-bottom:20px" title={`${pageState.dataSource.male?.username} & ${pageState.dataSource.female?.username}`} bordered>
                <a-descriptions-item label="ID">{pageState.dataSource.id}</a-descriptions-item>
                <a-descriptions-item label="情侣状态">{configCurryFilter('coupleStatus', pageState.dataSource.status as string)}</a-descriptions-item>
                <a-descriptions-item label="建立时间">{pageState.dataSource.relationshipDate ? dayjs(pageState.dataSource.relationshipDate).format('YYYY-MM-DD HH:mm:ss') : '-'}</a-descriptions-item>
                <a-descriptions-item label="男方">
                    <a onClick={() => toUser(pageState.dataSource.male?.id as number)}>{pageState.dataSource.male?.username}</a>
                </a-descriptions-item>
                <a-descriptions-item label="女方">
                    <a onClick={() => toUser(pageState.dataSource.female?.id as number)}>{pageState.dataSource.female?.username}</a>
                </a-descriptions-item>
                <a-descriptions-item label="关系解除时间">{pageState.dataSource.breakupDate ? dayjs(pageState.dataSource.breakupDate).format('YYYY-MM-DD HH:mm:ss') : '-'}</a-descriptions-item>
                <a-descriptions-item label="结婚时间">{pageState.dataSource.weddingDate ? dayjs(pageState.dataSource.weddingDate).format('YYYY-MM-DD HH:mm:ss') : '-'}</a-descriptions-item>
                <a-descriptions-item label="爱情宣言" >{pageState.dataSource.disjunction}</a-descriptions-item>
            </a-descriptions>


        </div>
    }
})